<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <my-checkbox
        :checked="foo"
        @change="val => { foo = val }"
        value="some value"
      ></my-checkbox>
    </div>
    <script src="vue.js"></script>
    <script>
      // Vue.component('my-checkbox', {
      //   model: {
      //     prop: 'checked',
      //     event: 'change'
      //   },
      //   data() {
      //     return {
      //       foo: true
      //     }
      //   },
      //   updated() {
      //     console.log(this.foo)
      //   },
      //   props: {
      //     // this allows using the `value` prop for a different purpose
      //     value: String,
      //     // use `checked` as the prop which take the place of `value`
      //     checked: {
      //       type: Number,
      //       default: 0
      //     }
      //   }
      //   // ...
      // })
      var vm = new Vue({
        el: '#app'
      })
    </script>
  </body>
</html>
